<template>
  <div class="container">
    <el-card>
      <!-- 组件部分 -->
      <subjects :counts="counts">
        <template #left>
          <el-form-item label="目录名称" style="margin-left: 10px">
            <el-input v-model="directory.directorysName" />
          </el-form-item>
          <el-form-item label="状态" style="margin-left: 40px">
            <el-select v-model="directory.state" placeholder="请选择">
              <el-option
                v-for="item in status"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="clear">清除</el-button>
            <el-button type="primary" @click="search">搜索</el-button>
          </el-form-item>
        </template>
        <template #right>
          <el-button type="success" icon="el-icon-edit" @click="isShow = true"
            >新增目录</el-button
          >
        </template>
      </subjects>
      <!-- 表格部门 -->
      <el-table
        :data="directorys"
        :header-cell-style="{ background: '#ebeef5' }"
      >
        <el-table-column label="序号" width="80" type="index" />
        <el-table-column label="所属学科" prop="subjectName" />
        <el-table-column label="目录名称" prop="directoryName" />
        <el-table-column label="创建者" prop="username" />
        <el-table-column
          label="创建日期"
          prop="addDate"
          :formatter="replaceTime"
        />

        <el-table-column label="面试题数量" prop="totals" />
        <el-table-column label="状态" prop="state">
          <template slot-scope="{ row }">
            <span v-if="row.state === 1">已启用</span>
            <span v-if="row.state === 0">已禁用</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button type="text" @click="operation(row)">{{
              row.state === 0 ? "启用" : "禁用"
            }}</el-button>
            <el-button
              type="text"
              @click="editDirectorys(row.id)"
              :disabled="row.state == 1"
              >修改</el-button
            >
            <el-button
              type="text"
              @click="delDirectorys(row.id)"
              :disabled="row.state == 1"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 底部区域 -->
      <footer>
        <el-pagination
          background
          :current-page.sync="currentPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pagesize"
          layout=" prev, pager, next, sizes,jumper"
          :total="counts"
        >
        </el-pagination>
      </footer>

      <!-- 弹窗区域 -->
      <directoryAdd
        :show-dialog.sync="isShow"
        @addDirectorys="getDirectorys"
        :id="id"
        @updateDirectorys="updateDirectorys"
        ref="directoryAdd"
      />
    </el-card>
  </div>
</template>

<script>
import subjects from './subjects/index.vue'
import { list, changeState, remove } from '@/api/hmmm/directorys'
import { status } from '@/api/hmmm/constants'
import dayjs from 'dayjs'
import directoryAdd from '../components/directorys-add.vue'

export default {
  components: {
    subjects,
    directoryAdd
  },
  data () {
    return {
      directorys: [],
      page: 1,
      pagesize: 10,
      counts: null,
      // 当前页码数
      currentPage: 1,
      directory: {
        directorysName: '',
        state: ''
      },
      // 状态
      status: [],
      // 时间数组
      addDates: [],
      isShow: false,
      // 学科ID
      subjectID: this.$route.query.id,
      id: null
    }
  },
  created () {
    this.getDirectorys()
  },
  methods: {
    async getDirectorys (params) {
      const { data } = await list({ subjectID: this.subjectID })
      this.directorys = data.items
      this.counts = data.counts
      this.status = status
      this.addDates = this.directorys.map((item) => {
        return dayjs(item.addDate).format('YYYY-MM-DD HH-mm-ss')
      })
    },
    // 页码大小变了刷新
    async handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.pagesize = val
      const res = await list({ pagesize: this.pagesize })
      this.directorys = res.data.items
    },
    // 当前页面变动时刷新
    async handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.page = val
      const { data } = await list({
        page: val,
        pagesize: this.pagesize
      })
      this.directorys = data.items
    },
    // 清空表单搜索
    clear () {
      this.directory = {
        directorysName: ''
      }
    },
    // 搜索功能
    async search () {
      const res = await list({
        directoryName: this.directory.directorysName,
        state: this.directory.state
      })
      this.directorys = res.data.items
    },
    // 修改功能
    editDirectorys (id) {
      this.isShow = true
      this.id = id
      // 回流数据
      this.$refs.directoryAdd.getDetail(id)
    },
    // 回传之后修改数据
    updateDirectorys (id) {
      this.id = id
      this.getDirectorys()
    },
    // 删除功能
    async delDirectorys (id) {
      try {
        await this.$confirm('此操作将永久删除该目录, 是否继续?', '提示', {
          type: 'warning'
        })
        await remove({ id })
        this.getDirectorys()
        this.$message.success('删除成功')
      } catch (error) {
        console.log(error)
      }
    },
    // 格式化时间
    replaceTime (row) {
      return dayjs(row.addDate).format('YYYY-MM-DD HH:mm:ss')
    },
    // 操作按钮
    async operation (row) {
      row.state = row.state === 0 ? 1 : 0
      row.state = await changeState(row)
      this.getDirectorys()
    }
  }
}
</script>

<style scoped >
footer {
  float: right;
  margin: 20px;
}
</style>
